<template>
  <div class="goodsAddContent">
    <div class="form">
      <el-form ref="contractForm" :rules="contractRules" :disabled="routerType === 'detail'" :model="contractForm"
        class="demo-form-inline" label-position="right" label-width="140px">
        <div class="basic">合同信息</div>
        <el-row :gutter="24" type="flex">
          <el-col :span="10">
            <el-form-item label="合同名称：" prop="name">
              <el-input v-clearEmoji v-model.trim="contractForm.name" style="width: 100%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="合同编号：" prop="number">
              <el-input v-clearEmoji v-model.trim="contractForm.number" style="width: 100%;" placeholder="请输入..." />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="10">
            <el-form-item label="供应商名称：" prop="supplierId">
              <el-select @click.native="getSCMList" v-model="contractForm.supplierId" filterable popper-class="eloption"
                style="width: 100%;">
                <el-option v-for="item in supplierIdList" :key="item.id" :value="item.id"
                  :label="item.supplierNum + ' ' + item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="商品税率：" prop="commodityRate">
              <el-select @click.native="getInputRate" v-model="contractForm.commodityRate" popper-class="eloption"
                style="width: 100%;">
                <el-option v-for="(val, key) in commodityRateList" :key="key" :value="key" :label="val" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="10">
            <el-form-item label="业务员姓名：" prop="salespersonName">
              <el-input v-clearEmoji v-model.trim="contractForm.salespersonName" style="width: 100%;"
                :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="业务员电话：" prop="salespersonPhone">
              <el-input v-clearEmoji v-model.trim="contractForm.salespersonPhone" style="width: 100%;"
                :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" type="flex">
          <el-col :span="20">
            <el-form-item label="备注：" prop="remark">
              <el-input v-clearEmoji v-model.trim="contractForm.remark" maxlength="500" rows="8" show-word-limit
                type="textarea" style="width: 100%;" :placeholder="routerType === 'detail' ? '' : '请输入'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="btnDiv">
      <el-button v-if="routerType === 'add' || routerType === ''" class="submitBtn" @click.stop="addContractInfo"
        style="width: 88px;">确定</el-button>
      <el-button v-if="routerType === 'edit'" class="submitBtn" @click.stop="updateScm"
        style="width: 88px;">提交</el-button>
      <el-button v-if="routerType === 'detail'" class="celBtn" @click.stop="returnBtn" style="width: 88px;">返回</el-button>
      <el-button v-if="routerType !== 'detail'" class="celBtn" style="width: 88px;" @click.stop="cancelBtn">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getSCMList } from '@/api/scm'
import { addContractInfo, getContractInfo, updateContractInfo } from '@/api/supplier'
import { getDictValueAndNameSource } from '@/api/dictionary'
export default {
  name: 'ContractAdd',

  data() {
    return {
      routerType: 'add',
      contractId: '',
      addtions: {
        names: ''
      },
      contractForm: {
        name: '',
        number: '',
        supplierId: '',
        remark: '',
        salespersonName: '',
        salespersonPhone: '',
        commodityRate: ''
      },
      contractRules: {
        name: [{
          required: true,
          message: '请输入合同名称',
          trigger: 'change'
        }, {
          min: 0,
          max: 20,
          message: '合同名称长度不能超过20个字符',
          trigger: 'change'
        }, {
          pattern: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/,
          message: '合同名称只能输入汉字',
          trigger: 'change'
        }],
        salespersonName: [{
          min: 0,
          max: 5,
          message: '业务员姓名长度不能超过5个字符',
          trigger: 'change'
        }, {
          pattern: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/,
          message: '业务员姓名只能输入汉字',
          trigger: 'change'
        }
        ],
        salespersonPhone: [
          {
            pattern: /^1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'change'
          }
        ],
        supplierId: [{
          required: true,
          message: '请选择供应商',
          trigger: 'change'
        }],
        commodityRate: [{
          required: true,
          message: '请选择商品税率',
          trigger: 'change'
        }],
        number: [{
          required: true,
          message: '请输入合同编号',
          trigger: 'change'
        },
        {
          min: 0,
          max: 20,
          message: '合同编号不能超过30个字符',
          trigger: 'change'
        },
        {
          pattern: /^[A-Za-z0-9]+$/,
          message: '合同编号只能输入数字或字母',
          trigger: 'change'
        }
        ],
        remark: [{
          min: 0,
          max: 500,
          message: '备注不能超过500个字符',
          trigger: 'change'
        }
        ]
      },
      shopId: '',
      commodityRateList: [],
      supplierIdList: []
    }
  },
  watch: {

  },
  created() {
    this.getSCMList()
    this.getInputRate()
    this.routerType = this.$route.query.type ? this.$route.query.type : 'add'
    this.contractId = this.$route.query?.id
    if (this.contractId) {
      console.log(this.contractId)
      this.getContractInfo()
    }
  },
  methods: {
    async getSCMList() {
      const res = await getSCMList()
      if (res.code === 200) {
        const data = res.data
        this.supplierIdList = data.list
        console.log(data)
        console.log('供应商', this.supplierIdList)
      }
    },
    async getInputRate() {
      const res = await getDictValueAndNameSource('TAX_RATE');
      if (res.code === 200) {
        this.commodityRateList = res.data
      }
    },
    async getContractInfo() {
      const res = await getContractInfo({ id: this.contractId })
      console.log(res)
      if (res.code === 200) {
        const data = res.data
        this.contractForm = data
        console.log('供应商', data)
      } else {
        // this.$message.error(res.message)
      }
    },
    // 添加合同
    addContractInfo() {
      console.log(this.contractForm)
      this.$refs.contractForm.validate(async (isOk) => {
        if (isOk) {
          const res = await addContractInfo(this.contractForm)
          console.log(res.code)
          if (res.code === 200) {
            this.$message.success('添加成功')
            this.$refs.contractForm.resetFields()
            this.closeTag('contractManagement')
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
        }
      })
    },
    updateScm() {
      console.log(this.contractForm)
      this.$refs.contractForm.validate(async (isOk) => {
        if (isOk) {
          const res = await updateContractInfo({ ...this.contractForm, id: this.contractId })
          console.log(res.code)
          if (res.code === 200) {
            this.$message.success('修改成功')
            this.$refs.contractForm.resetFields()
            this.closeTag('contractManagement')
          } else {
            // this.$message.error(res.message)
          }
        } else {
          this.$message.warning('请检查填写的信息')
        }
      })
    },
    returnBtn() {
      this.closeTag('contractManagement')
    },
    cancelBtn() {
      this.closeTag('contractManagement')
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsAddContent {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  .btnDiv {
    display: flex;
    // text-align: right;
    // padding-left: 85%;
    justify-content: end;
    // padding-right: 30px;
    // margin-right: auto;

  }

  .form {
    background-color: #fff;
    // padding: 15px;

    .basic {
      font-family: PingFang SC, PingFang SC;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 32px;
    }


    .imgUpload {
      ::v-deep .el-upload:hover {
        border-color: #409EFF;
      }

      ::v-deep .el-upload {
        position: relative;
        margin-bottom: 10px;
        margin-left: 5px;
        width: 50px;
        height: 50px;
        line-height: 20px;
        padding-top: 5px;
      }

      .txt {
        color: #595858;
        font-size: 12px;
      }

    }
  }
}

.el-upload--picture-card i {
  font-size: 12px !important;
}

.el-button--small {
  padding: 9px 0;
}

::deep el-button {
  text-align: center;
}

.map {
  width: 200px;
  height: 200px;
}

::v-deep .el-row {
  margin-bottom: 20px;
}
</style>
